<template>
  <div class="cultural-box flex_between">
    <!-- <EchartsGauge style="width: 400px;height: 400px;"></EchartsGauge> -->
    <transition name="left" appear>
      <div class="left">
        <ItemBox v-if="grade==1 || grade == 2" @gradeClick="gradeClick" :title="title" style="height: 47%;"
          class="left-top">
          <span class="date" slot="select">{{date}}</span>
          <div slot="content" class="flex left-top1">
            <EchartsPie class="pie-echarts" :label="item.title" :data="item.data" v-for="(item,index) in leftTop1"
              :key="index"></EchartsPie>
          </div>
          <div slot="content" class="left-top2">
            <Wenlv :data="leftTop2"></Wenlv>
          </div>
          <!-- <HorizontalBar></HorizontalBar> -->
          <div slot="content" class="flex left-top3">
            <EchartsBar class="bar-echarts" unit="人" :data="leftTop3" label="景区数量" yName="当日客源地分析"
              :nameTextStyle="[0, -40, 0, 0]"></EchartsBar>
          </div>
        </ItemBox>
        <ItemBox v-if="grade==1 || grade == 2" title="今日实时交易明细" style="height: 24.1%;"
          :backgroundImage="require('@/assets/images/licang/kuang/k3.png')" class="left-center">
          <span class="date" slot="select">{{date}}</span>
          <TradeDetail :lines="6" slot="content" style="margin-top: 3px;" />
        </ItemBox>
        <ItemBox v-if="grade==3" @gradeClick="gradeClick" :title="title" style="height: 27%;" class="right-center"
          :backgroundImage="require('@/assets/images/licang/kuang/k3.png')">
          <Info :data="leftTop2" slot="content" type="wl"></Info>
        </ItemBox>
        <ItemBox v-if="grade==3" title="商户分析" style="height:44%;" class="right-center"
          :backgroundImage="require('@/assets/images/licang/kuang/k5.png')">
          <EchartsLine yName="景区营业额分析" color="rgba(18, 220, 221," labelUnit="万元" slot="content" :data="sjyyesj"
            style="width: 100%;height:48%;margin-bottom: 2%;">
          </EchartsLine>
          <EchartsLine yName="景区人流量分析" labelUnit="人" slot="content" :data="sjrllsj" style="width: 100%;height:48%;">
          </EchartsLine>
        </ItemBox>
        <ItemBox title="景区服务预警" style="height: 25.5%;" :backgroundImage="require('@/assets/images/licang/kuang/k3.png')"
          class="left-bottom">
          <span class="date" slot="select">{{date}}</span>
          <div class="environment-box" slot="content" @click="addAlarmPoints">
            <EchartsMoreLine class="line" :data="leftBottom1"
              :color="['rgba(18, 220, 221,','rgba(104, 187, 196,','rgba(88, 165, 92,','rgba(242, 189, 66,',]">
            </EchartsMoreLine>
            <div class="pie-box">
              <EchartsPercentage :titleSize="14" unit="%" v-for="(item,index) in leftBottom2" :key="index"
                class="pie-echarts" :label="item.name" :data="item.rate"></EchartsPercentage>
            </div>
          </div>

        </ItemBox>
      </div>
    </transition>
    <div class="center">
      <Statistics :data="statistics"></Statistics>
      <DirectionTI style="width:50% ;position: relative;top: 25px;" type="wl" :data="directionTIData"
        @navClick="navClick" ref="DirectionTI">
      </DirectionTI>
      <!-- <div class="backBtnWrap" v-if="grade > 1">
        <el-button icon="el-icon-back" size="large" circle @click="grade -= 1"></el-button>
      </div> -->
    </div>
    <transition name="right" appear>
      <div class="right">
        <ItemBox title="当前待处置风险" style="height: 33.5%;"
          :backgroundImage="require('@/assets/images/licang/kuang/k1.png')" class="right-top">
          <span class="date" slot="select">{{date}}</span>
          <InfoList slot="content" @dispose="dispose" :list="infoList.list" :tags="infoList.tags"></InfoList>
        </ItemBox>
        <ItemBox title="已下发处置任务统计" style="height: 36%;" class="right-center"
          :backgroundImage="require('@/assets/images/licang/kuang/k4.png')">

          <TabPie slot="content" ref="TabPie" :data="tabPieData"></TabPie>
        </ItemBox>
        <ItemBox title="景区应急预警" style="height: 27%;" :backgroundImage="require('@/assets/images/licang/kuang/k3.png')"
          class="right-bottom">
          <div class="pie-box" slot="content">
            <div v-for="(item,index) in rightBottom" :key="index" class="flex_center_direction2">
              <EchartsPercentage :label="item.rate+'%'" unit="%" class="pie-echarts" :data="item.rate">
              </EchartsPercentage>
              <span style="color:#ffffff;font-size: 17px;">{{item.name}}</span>
            </div>
          </div>
        </ItemBox>
      </div>
    </transition>
    <!-- 处置弹窗 -->
    <Pop ref="Pop" :type="popInfo.type" :info="popInfo.info"></Pop>
  </div>
</template>

<script>
  import Info from '@/components/TradeDetail/info'
  import Wenlv from '@/components/TradeDetail/wenlv'
  import TabPie from '@/components/echarts/pie/tab-pie'
  import MarkData from '@/components/amap/marks'
  import { mapGetters } from 'vuex';
  import Statistics from "@/components/image-text/statistics";
  let gradeList = [{ name: '李沧区汇总', value: '1' }, { name: '景区', value: '2' }, { name: '青岛园艺博览园', value: '3' }]
  export default {
    name: 'Cultural',
    components: {
      TabPie, Wenlv, Info, Statistics

    },
    data() {
      return {
        gradeList: JSON.parse(JSON.stringify(gradeList)),
        grade: 1,//等级
        title: '文旅实时情况',
        directionTIData: [{
          img: require('@/assets/images/licang/sq/tab8.png'),
          imgActive: require('@/assets/images/licang/sq/tab8.png'),
          name: "景区",
        },
        {
          img: require('@/assets/images/licang/sq/tab6.png'),
          imgActive: require('@/assets/images/licang/sq/tab6-2.png'),
          name: "酒店",
        },
        {
          img: require('@/assets/images/licang/sq/tab1.png'),
          imgActive: require('@/assets/images/licang/sq/tab1-2.png'),
          name: "餐饮",
        },
        {
          img: require('@/assets/images/licang/sq/tab2-2.png'),
          imgActive: require('@/assets/images/licang/sq/tab2-2.png'),
          name: "乐园",
        },],
        date: null,
        leftTop1: [
          {
            title: '景区数量',
            unit: '个',
            data: [
              { name: '餐饮', value: 100 },
              { name: '娱乐', value: 150 },
              { name: '教育', value: 160 },
              { name: '健康', value: 165 },
              { name: '商场', value: 139 },
              { name: '酒店', value: 181 },
            ]
          },
          {
            title: '交易金额',
            unit: '万元',
            data: [
              { name: '餐饮', value: 100 },
              { name: '娱乐', value: 130 },
              { name: '教育', value: 150 },
              { name: '健康', value: 175 },
              { name: '商场', value: 139 },
              { name: '酒店', value: 131 },
            ]
          },
          {
            title: '来源分析',
            unit: '万元',
            data: [
              { name: '餐饮', value: 130 },
              { name: '娱乐', value: 140 },
              { name: '教育', value: 134 },
              { name: '健康', value: 145 },
              { name: '商场', value: 154 },
              { name: '酒店', value: 132 },
            ]
          },
          {
            title: '从业人员',
            unit: '人',
            data: [
              { name: '餐饮', value: 130 },
              { name: '娱乐', value: 140 },
              { name: '教育', value: 134 },
              { name: '健康', value: 145 },
              { name: '商场', value: 154 },
              { name: '酒店', value: 132 },
            ]
          },
        ],
        leftTop2: [
          { name: '展馆园艺', value: 122453, rate: "89", type: "up", person: 23424 },
          { name: '动植物园', value: 235464, rate: "87", type: "down", person: 15326 },
          { name: '景区景点', value: 86435, rate: "92", type: "up", person: 12364 },
        ],
        leftTop3: [
          { name: '北京', value: 342 },
          { name: '上海', value: 235 },
          { name: '深圳', value: 134 },
          { name: '南京', value: 347 },
          { name: '杭州', value: 236 },
          { name: '郑州', value: 123 },
          { name: '洛阳', value: 135 },
          { name: '邯郸', value: 235 },
          { name: '淄博', value: 432 },
          { name: '重庆', value: 247 },
          { name: '其他', value: 532 },
        ],
        //商家营业额数据
        sjyyesj: [
          { name: '1', value: 130 },
          { name: '2', value: 140 },
          { name: '3', value: 134 },
          { name: '4', value: 145 },
          { name: '5', value: 154 },
          { name: '6', value: 132 },
          { name: '7', value: 175 },
        ],
        //商家人流量数据
        sjrllsj: [
          { name: '1', value: 235 },
          { name: '2', value: 435 },
          { name: '3', value: 224 },
          { name: '4', value: 235 },
          { name: '5', value: 475 },
          { name: '6', value: 235 },
          { name: '7', value: 246 },
        ],
        //商家人流量数据
        sjrlisj: [
          { name: '餐饮', value: 130 },
          { name: '娱乐', value: 140 },
          { name: '教育', value: 134 },
          { name: '健康', value: 145 },
          { name: '商场', value: 154 },
          { name: '酒店', value: 132 },
        ],
        leftBottom1: {
          xData: ['1', '3', "4", "5", '6', '7', "9",],
          yData: [{ name: '电', data: [2, 3, 3, 5, 4, 3, 3] },
          { name: '网络', data: [12, 13, 16, 13, 17, 13, 13] },
          { name: '缆车', data: [24, 23, 23, 24, 21, 26, 28] },
          { name: '游乐设备', data: [32, 34, 36, 33, 31, 37, 38] }],
        },
        leftBottom2: [
          {
            name: '景区厕所',
            rate: 16,
          },
          {
            name: '景区停车场',
            rate: 33,
          },
          {
            name: '景区便利店',
            rate: 27,
          },
          {
            name: '景区餐饮',
            rate: 7,
          },
        ],
        rightBottom: [
          {
            name: '巡查警力预警',
            rate: 16,
          },
          {
            name: '应急资源预警',
            rate: 33,
          },
          {
            name: '景点工作人员',
            rate: 27,
          },
          {
            name: '医疗资源预警',
            rate: 7,
          },
        ],
        tabPieData: [
          {
            value: 'a',
            name: "行政街区",
          },
          {
            value: 'b',
            name: "行业分类",
          },
          {
            value: 'c',
            name: "行政单位",
          }
        ],
        //处置风险数据
        infoList: {
          tags: [{ label: '公交线路' }, { label: '车流拥堵' }],
          list: [
            { title: '乐客城人流拥堵', desc: '上报来源：633公交车', dispatch: '下发到：李沧区交警支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
            { title: '万达停车场车流拥堵', desc: '上报来源：603公交车', dispatch: '下发到：李沧区李村中队支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
            { title: '金水路拥堵', desc: '上报来源：506公交车', dispatch: '下发到：李沧区遵义路支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
          ]
        },
        statistics: [
          { title: '年累计交易金额/元', value: '23456765', icon: require('@/assets/images/licang/icon/icon_sy_3@2x.png') },
          { title: '每年累计人流量/人次', value: '644679', icon: require('@/assets/images/licang/icon/icon_sq_1@2x.png') },
          { title: '人年累计交易金额/月', value: '454436', icon: require('@/assets/images/licang/icon/icon_sy_1@2x.png') },
          { title: '月累计人流量/人次', value: '34552', icon: require('@/assets/images/licang/icon/icon_sy_2@2x.png') },
        ],
        popInfo: {},
        timer: null
      };
    },
    computed: {
      ...mapGetters([
        'isMapReady',
        'map'
      ])
    },
    watch: {
      isMapReady(val) {
        if (val) {
          this.setMap(this.grade)
        }
      },
      grade(val) {
        if (val > 3) {
          this.grade = 3
        }
        this.setMap(val)
      }
    },
    created() {
      this.getDate()
      this.initInterval()
      this.initXData()
    },
    mounted() {
      this.setMap(this.grade)
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.map.clearMap()
      this.$store.dispatch('resetCenterAndZoom')
    },
    methods: {
      setMap(val) {
        if (val == 1) {
          if (this.map) {
            this.map.clearMap()
          }
          this.$store.dispatch('focusMainDistrict')
          this.$store.dispatch('addConstantMarks', {
            type: 'tourism',
            onClick: () => {
              this.grade = 3
              let newArr = JSON.parse(JSON.stringify(gradeList))
              this.title = newArr.slice(0, 3)
              this.tabPieData = []
              this.initData()
              this.$refs.DirectionTI.activaName='景区'
            }
          })
          // const marks = MarkData.lv1
          // this.$store.dispatch('addMarks', { data: marks, onClick: () => {
          //     this.grade += 1
          //   }
          // })
          this.$refs.DirectionTI.reset()
          this.$store.dispatch('resetCenterAndZoom')
        } else if (val == 2) {
          if (this.map) {
            this.map.clearMap()
          }
          this.$store.dispatch('focusMainDistrict')
          this.$store.dispatch('resetCenterAndZoom')
          const marks = MarkData.lv2
          this.$store.dispatch('addMarks', {
            data: marks, onClick: () => {
              this.grade = 3
              let newArr = JSON.parse(JSON.stringify(gradeList))
              this.title = newArr.slice(0, 3)
              this.tabPieData = []
              this.initData()
            },
            iconSrc: require("@/assets/images/licang/dw/green.png")
          })
          this.$store.dispatch('addConstantMarks', {
            type: 'tourism',
            onClick: () => {
              this.grade = 3
            }
          })
        } else if (val == 3) {
          this.$store.dispatch('focusTourismZone')
          // const marks = MarkData.culture

          // this.$store.dispatch('addMarks', {
          //   data: marks, onClick: (mark) => {
          //     this.$store.dispatch('openInfoWindow', { position: mark, type: "tourism" })
          //   }
          // })
        }
      },
      //获取当前日期
      getDate() {
        this.date = this.$moment().format('YYYY-MM-DD')
      },
      initInterval() {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.timer = setInterval(() => {

        }, 80000)
      },
      //随机数据
      initData() {
        for (let items of this.leftTop1) {
          for (let item of items.data) {
            item.value = Number((Math.round(Math.random() * 200)).toFixed(0))
          }
        }
        for (let item of this.leftTop3) {
          item.value = this.$randomNum(200, 600)
        }
        this.$refs.TabPie.initPie()
        //营商环境
        for (let i in this.leftBottom1.yData[0].data) {
          this.$set(this.leftBottom1.yData[0].data, i, this.$randomNum(1, 10))
        }
        for (let i in this.leftBottom1.yData[1].data) {
          this.$set(this.leftBottom1.yData[1].data, i, this.$randomNum(11, 20))
        }
        for (let i in this.leftBottom1.yData[2].data) {
          this.$set(this.leftBottom1.yData[2].data, i, this.$randomNum(21, 30))
        }
        for (let i in this.leftBottom1.yData[3].data) {
          this.$set(this.leftBottom1.yData[3].data, i, this.$randomNum(31, 40))
        }
        //营商环境
        for (let item of this.leftBottom2) {
          item.rate = this.$randomNum(30, 60)
        }
        //行政资源预警
        for (let item of this.rightBottom) {
          item.rate = this.$randomNum(20, 60)
        }
        this.$set(this.statistics[0], 'value', this.$randomNum(200000000, 300000000))
        this.$set(this.statistics[1], 'value', this.$randomNum(6000000, 70000000))
        this.$set(this.statistics[2], 'value', this.$randomNum(50000000, 60000000))
        this.$set(this.statistics[3], 'value', this.$randomNum(500000, 600000))
      },
      initXData() {
        this.leftBottom1.xData = this.$getRecent7Hours()
        let recentWeekDates = this.$getRecentWeekDates()
        for (let i in this.sjyyesj) {
          this.sjyyesj[i].name = recentWeekDates[i]
          this.sjrllsj[i].name = recentWeekDates[i]
        }
      },
      // //单模块标题点击
      // titleClick() {
      //   this.title = '文旅实时情况'
      //   this.initData()
      //   this.$refs.DirectionTI.activaName = ''
      //   this.tabPieData = [
      //     {
      //       value: 'a',
      //       name: "行政街区",
      //     },
      //     {
      //       value: 'b',
      //       name: "行业分类",
      //     },
      //     {
      //       value: 'c',
      //       name: "行政单位",
      //     }
      //   ]
      // },
      navClick(e) {
        this.initData()
        let newArr = JSON.parse(JSON.stringify(gradeList))
        this.title = newArr.slice(0, 2)
        this.$refs.TabPie.title = '行政街区'
        this.$refs.TabPie.activeName = 'a'
        this.tabPieData = [
          {
            value: 'a',
            name: "行政街区",
          },
          {
            value: 'c',
            name: "行政单位",
          }
        ]
        this.grade = 2

      },
      //等级点击
      gradeClick(e) {
        if (typeof e != 'string') {
          if (e.value == 1) {
            this.title = '文旅实时情况'
            this.grade = 1
            this.leftTop2 = [
              { name: '展馆园艺', value: 374732, rate: "64", type: "up", person: 34353 },
              { name: '动植物园', value: 548382, rate: "34", type: "down", person: 24542 },
              { name: '景区景点', value: 3828284, rate: "43", type: "up", person: 22452 },
            ]
            this.$refs.DirectionTI.activaName = ''
            this.tabPieData = [
              {
                value: 'a',
                name: "行政街区",
              },
              {
                value: 'b',
                name: "行业分类",
              },
              {
                value: 'c',
                name: "行政单位",
              }
            ]
          } else {
            let newArr = JSON.parse(JSON.stringify(gradeList))
            this.title = newArr.slice(0, e.value)
            this.grade = Number(e.value)
            if (e.value == 2) {
              this.tabPieData = [
                {
                  value: 'a',
                  name: "行政街区",
                },

                {
                  value: 'c',
                  name: "行政单位",
                }
              ]
            }
            if (e.value == 3) {
              this.tabPieData = []
            }
          }
        }
        this.initData()

      },
      dispose(e) {
        this.popInfo = {
          type: '交通疏导指令',
          info: e.dispatch.replace('下发到：', '')
        }
        this.$refs.Pop.open = true
      },
      addAlarmPoints() {
        const marks = MarkData.lv33
        this.$store.dispatch('addMarks', {
          data: marks, type: 1, onClick: mark => {
            this.$store.dispatch('openInfoWindow', { position: mark, type: "alarm" })
          }
        })
      }
    },

  };
</script>

<style lang="scss" scoped>
  .cultural-box {
    width: 100%;
    height: 100%;
    align-items: start;

    .left,
    .right {
      pointer-events: fill;
      width: 24.5%;
      height: 100%;

      .date {
        font-size: 22px;
        margin-right: 20px;
        color: rgba(255, 255, 255, 0.8)
      }

      @media (max-width: 2600px) {
        .date {
          font-size: 26px;
        }
      }

      /* background-color: red; */
    }

    .left {
      .left-top {
        .left-top1 {
          width: 100%;
          height: 30%;

          .pie-echarts {
            width: 25%;
            height: 160px;
          }
        }

        .left-top2 {
          width: 100%;
          height: 30%;
          flex-direction: column;
          padding: 1% 3% 0;
        }

        .left-top3 {
          width: 100%;
          height: 40%;
          margin-top: 1%;
        }
      }

      .left-bottom {
        .environment-box {
          width: 100%;
          display: flex;
          height: 100%;

          .line {
            width: 66%;
          }

          .pie-box {
            width: 34%;
            height: 100%;
            margin-left: 45px;

            .pie-echarts {
              width: 115px;
              float: left;
              margin: 5px 14px 0 0;
              height: 115px;
            }
          }
        }

      }
    }

    .center {
      flex: 1;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: fill;
      position: relative;

      .backBtnWrap {
        position: absolute;
        top: 20%;
        left: 40px;
        width: 80px;
        height: 80px;
        transform: translateY(-50%);

        .el-button {
          font-size: 30px;
        }
      }
    }

    .right {
      .right-bottom {
        .pie-box {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: space-between;

          .pie-echarts {
            width: 150px;
            float: left;
            height: 150px;
            margin-bottom: 5px;
          }

        }
      }
    }

    .lWrap {
      width: 100%;
      padding-right: 40px;
      padding-top: 10px;
    }

  }
</style>